<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {
  reqSkuDelete,
  reqSkuInfo,
  reqSkuList,
  reqSkuToggleSale,
} from '@/api/product/sku'
import { PagesData, ResponseData } from '@/api/type.ts'
import { SKU } from '@/api/product/sku/type.ts'
import { ElMessage } from 'element-plus'
import SkuDetails from '@/views/product/sku/SkuDetails.vue'

const currentPage = ref<number>(1)
const pageSize = ref<number>(10)
const total = ref<number>(0)
const skuList = ref<SKU[]>([])
const skuTableRef = ref<any>()
const skuDetailsRef = ref<any>()
const skuToShow = ref<SKU>()

const getSkuList = async () => {
  try {
    const { code, data, message }: ResponseData<PagesData<SKU>> =
      await reqSkuList(currentPage.value, pageSize.value)
    if (code == 200) {
      skuList.value = data?.records
      total.value = data?.total
    } else {
      ElMessage({
        type: 'error',
        message: message,
      })
    }
  } catch (err: any) {
    ElMessage({
      type: 'error',
      message: err?.message,
    })
  }
}

const onSkuToggleSale = async (row: SKU, toggle: boolean) => {
  try {
    const { code, data, message }: ResponseData<any> = await reqSkuToggleSale(
      row?.id as number,
      toggle,
    )
    if (code == 200) {
      ElMessage({
        type: 'success',
        message: toggle ? '上架成功' : '下架成功',
      })
      await getSkuList()
    } else {
      ElMessage({
        type: 'error',
        message: data ? data : message,
      })
    }
  } catch (err: any) {
    ElMessage({
      type: 'error',
      message: err?.message,
    })
  }
}

const onSkuEdit = () => {
  ElMessage.warning('暂未开放')
}

const onSkuView = async (row: SKU) => {
  try {
    const { code, data, message }: ResponseData<any> = await reqSkuInfo(
      row?.id as number,
    )
    if (code == 200) {
      skuToShow.value = data
      skuDetailsRef.value.setShow(true)
    } else {
      ElMessage({
        type: 'error',
        message: data ? data : message,
      })
    }
  } catch (err: any) {
    ElMessage({
      type: 'error',
      message: err?.message,
    })
  }
}

const onSkuDelete = async (row: SKU) => {
  try {
    const { code, data, message }: ResponseData<any> = await reqSkuDelete(
      row?.id as number,
    )
    if (code == 200) {
      ElMessage.success('删除成功')
      await getSkuList()
    } else {
      ElMessage({
        type: 'error',
        message: data ? data : message,
      })
    }
  } catch (err: any) {
    ElMessage({
      type: 'error',
      message: err?.message,
    })
  }
}

const onPaginationChange = () => {
  getSkuList()
  skuTableRef.value.setScrollTop(0)
}

onMounted(() => {
  getSkuList()
})
</script>

<template>
  <el-card>
    <el-table :data="skuList" height="600" stripe ref="skuTableRef" border>
      <el-table-column
        fixed
        prop="id"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>
      <el-table-column
        fixed
        prop="skuName"
        label="SKU名称"
        show-overflow-tooltip
        width="200"
      ></el-table-column>
      <el-table-column
        prop="skuDesc"
        label="SKU描述"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column label="图片" width="200" align="center">
        <template #default="{ row }">
          <img :src="row?.skuDefaultImg" style="height: 80px" alt="" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量" width="100"></el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        :formatter="(row, col, cellValue) => '￥' + cellValue"
        width="100"
      ></el-table-column>
      <el-table-column label="是否上架" width="100" align="center">
        <template #default="{ row }">
          <el-switch
            v-model="row.isSale"
            :active-value="1"
            :inactive-value="0"
            size="small"
            @change="onSkuToggleSale(row, row.isSale)"
          ></el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="250">
        <template #default="{ row }">
          <el-button
            :type="row?.isSale == 1 ? 'info' : 'success'"
            :icon="row?.isSale == 1 ? 'Bottom' : 'Top'"
            :title="row?.isSale == 1 ? '下架SKU' : '上架SKU'"
            size="small"
            @click="onSkuToggleSale(row, !row?.isSale)"
          ></el-button>
          <el-button
            type="primary"
            size="small"
            icon="Edit"
            title="编辑SKU"
            @click="onSkuEdit"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            icon="View"
            title="查看SKU"
            @click="onSkuView(row)"
          ></el-button>
          <el-popconfirm
            width="220"
            confirm-button-text="确认"
            cancel-button-text="取消"
            :title="`确认删除SKU：${row?.skuName}`"
            @confirm="onSkuDelete(row)"
          >
            <template #reference="">
              <el-button
                type="danger"
                size="small"
                icon="Delete"
                title="删除SKU"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[1, 5, 10, 15]"
      :total="total"
      layout="prev, pager, next, jumper, ->, total, sizes"
      :background="true"
      :small="true"
      @change="onPaginationChange"
    ></el-pagination>
    <SkuDetails :sku="skuToShow" ref="skuDetailsRef" />
  </el-card>
</template>

<style scoped lang="scss"></style>
